<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/jquery-3.4.1.min.js"></script>
</head>
<body>

<img class="song-albumImg" th:src="${song.albumImg}" />

<h1 class="song-name" th:text="${song.name}"></h1>

<a href="#" th:data-id="${song.id}" class="play-btn">播放</a>
<audio id="player" style="display: none;" src="" controls="controls"></audio>

<h3>
    <labol>歌手：</labol><span class="song-singer" th:text="${song.singer}"></span>
</h3>

<h3>
    <labol>所属专辑：</labol><span class="song-albunName" th:text="${song.albunName}"></span>
</h3>

<h3>
    <labol>评论数：</labol><span class="song-commentCount" th:text="${song.commentCount}"></span>
</h3>

<div th:utext="${song.lyrics}" class="song-lyrics"></div>

<h3>相似歌曲</h3>
<ul>
    <li>
        <a href="#" class="change-song" data-id="16435049">Someone Like You  </a>
        <a href="#" class="player-btn" data-id="16435049">播放</a>
    </li>
</ul>

<h1>评论</h1>
<form action="/comment/post" method="post">

    <input type="hidden" name="nickName" value="luccey">
    <input type="hidden" name="songId" value="1340349249" />
    <input type="text" name="content" style="width: 80%;height: 100px;" placeholder="填写你的评论"/>
    <br/>
    <button type="submit">评论</button>
</form>



<h3>精彩评论</h3>
<ul th:each="comment:${comments}">
    <li>
        <img th:src="${comment.icon}">
        <span th:text="${comment.nickName}"></span>
        <span th:text="${comment.content}"></span>
    </li>
    <li>
        <label>评论时间：</label>
        <span th:text="${#dates.format(comment.commentTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
        <label>点赞数：</label>
        <a href="#" th:data-id="${comment.id}" class="like-btn">
            <span th:text="${comment.likeNumber}"></span></a>
    </li>
</ul>

<script>
    $(function () {
        //播放函数
        $(".play-btn").on('click',function (e) {
            e.preventDefault();
            var songId = $(this).data("id");
            $.ajax({
                url:"/song/music",
                method:"GET",
                data:{
                    songId:songId
                },
                cache:false
            })
                .done(function (data) {
                    $("#player").show();
                    $("#player").attr("src",data);
                    document.getElementById("player").play();
                });
        });

        //处理切换歌曲
        $(".change-song").on('click',function (e) {
            e.preventDefault();
            var songId = $(this).data("id");
            $.ajax({
                url:"/song/get",
                method:"GET",
                data:{
                    songId:songId
                },
                cache:false
            })
            .done(function (data) {
                $('.song-albumImg').attr('src',data.albumImg);
                $('.song-albunName').html(data.albumName);
                $('.song-commentCount').html(data.commentCount);
                $('.song-lyrics').html(data.lyrics);
                $('.song-name').html(data.name);
                $('.song-singer').html(data.singer);

            });
        })
    });

    $(function () {
        $(".like-btn").on('click',function (e) {
            e.preventDefault();
            var self = $(this);
            var commentId = self.data('id');
            $.ajax({
                url:"/comment/like",
                method:"POST",
                data:{
                    songId:1340349249,
                    commentId:commentId
                },
                cache:false
            })
                .done(function (data) {
                    self.html(data.likeNumber);
                });
        });
    });


</script>




</body>

</html>